<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./assets/lib/bootstrap/bootstrap.min.css">
  <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
  <!-- <link rel="stylesheet" href="./assets/lib/toastr/toastr.min.css"> -->
  <!-- <link rel="stylesheet" href="./assets/lib/validator/bootstrapValidator.min.css"> -->
  <link rel="stylesheet" href="./assets/css/student.css">
</head>

<body>

  <!-- 添加学员 弹窗内容部分 start -->
  <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addModalLabel">录入新学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

        </div>
      </div>
    </div>
  </div>
  <!-- 添加学员 弹窗内容部分 end -->


  <!-- 修改学员 弹窗内容部分 start -->
  <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="updateModalLabel">修改学员信息</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form action="" class="container update-form">
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">姓名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="name" placeholder="学员姓名" autocomplete="off">
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">年龄</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="age" placeholder="学员年龄" autocomplete="off">
              </div>
            </div>
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">组号</label>
              <div class="col-sm-10">
                <select class="form-select form-select-sm" name="group">
                  <option selected value="">请选择一个组号</option>
                  <option value="1">1组</option>
                  <option value="2">2组</option>
                  <option value="3">3组</option>
                  <option value="4">4组</option>
                  <option value="5">5组</option>
                  <option value="6">6组</option>
                  <option value="7">7组</option>
                  <option value="8">8组</option>
                  <option value="9">9组</option>
                  <option value="10">10组</option>
                  <option value="11">11组</option>
                  <option value="12">12组</option>
                  <option value="13">13组</option>
                  <option value="14">14组</option>
                  <option value="15">15组</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">性别</label>
              <div class="col-sm-10 self-valign">
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="男" checked>
                  <label class="form-check-label">男</label>
                </div>
                <div class="col-sm-1 form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="sex" value="女">
                  <label class="form-check-label">女</label>
                </div>
              </div>

            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">手机</label>
              <div class="col-sm-10">
                <input type="text" class="form-control form-control-sm" name="phone" placeholder="手机号" autocomplete="off">
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">薪资</label>
              <div class="col-sm-5">
                <input type="text" class="form-control form-control-sm" name="salary" placeholder="期望薪资" autocomplete="off">
              </div>
              <div class="col-sm-5">
                <input type="text" class="form-control form-control-sm" name="truesalary" placeholder="实际薪资" autocomplete="off">
              </div>
            </div>

            <div class="row mb-3">
              <label class="col-sm-2 col-form-label-sm">籍贯</label>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="province">
                  <option selected value="">--省--</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="city">
                  <option selected value="">--市--</option>
                </select>
              </div>
              <div class="col-sm-3">
                <select class="form-select form-select-sm" name="county">
                  <option selected value="">--县--</option>
                </select>
              </div>
            </div>

            <div class="row mb-3">
              <div class="col-sm-2"></div>
              <div class="col-sm-10">
                <input type="hidden" name="id">
                <button type="submit" class="btn btn-primary btn-sm">确认修改</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- 修改学员 弹窗内容部分 end -->



  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid header">
      <h1>学员管理</h1>
      <!-- 添加学生信息按钮 -->
      <button type="button" class="btn btn-primary btn-sm modal-dialog-centered" id="add">添加学员</button>
    </div>
  </nav>


  <!-- table-striped隔行换色 -->
  <table class="table table-striped">
    <colgroup>
      <col width="7%">
      <col width="8%">
      <col width="7%">
      <col width="7%">
      <col width="7%">
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="24%">
      <col width="10%">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">性别</th>
        <th scope="col">组号</th>
        <th scope="col">联系电话</th>
        <th scope="col">期望薪资</th>
        <th scope="col">实际薪资</th>
        <th scope="col">籍贯</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>

      <!-- <tr>
        <th scope="row">10</th>
        <td>张三</td>
        <td>20</td>
        <td>女</td>
        <td>1</td>
        <td>13261266666</td>
        <td>120000</td>
        <td>14000</td>
        <td>河北省承德市围场县</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm">修改</button>
          <button type="button" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr> -->
    </tbody>
  </table>


  <script src="./assets/lib/jquery-3.6.0.min.js"></script>
  <script src="./assets/lib/bootstrap/bootstrap.min.js"></script>
  <script src="./assets/lib/layui/layui.js"></script>
  <script src="./assets/lib/axios.js"></script>
  <script src="./assets/utils/request.js"></script>
  <script>
    layui.use(['form', "layer"], function() {
      let form = layui.form;
      let layer = layui.layer;


      //各种基于事件的操作，下面会有进一步介绍
      // *****************************************************************列表
      // 获取学员数据
      function getlist() {
        axios.get('/student/list').then(({
          data: res
        }) => {
          // console.log(res);
          if (res.code === 0) {
            let str = "";
            res.data.forEach(item => {
              str += `<tr>
                    <th scope="row">${item.id}</th>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.sex}</td>
                    <td>${item.group}</td>
                    <td>${item.phone}</td>
                    <td>${item.salary}</td>
                    <td>${item.truesalary}</td>
                    <td>${item.province}${item.city}${item.county}</td>
                    <td>
                    <button data-id="${item.id}"" type="button" class="btn btn-primary btn-sm update">修改</button>
                    <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
                    </td>
                </tr>`;
            });
            $('tbody').html(str);
          }
        })
      }
      getlist();
      // *****************************************************************新增
      function home(cb) {
        // 获取省
        axios
          .get('/geo/province')
          .then(({
            data: res
          }) => {
            // console.log(res);
            let str = '<option selected value="">--省--</option>';
            res.forEach(item => {
              str += `<option value="${item}">${item}</option>`;
            });
            $('#province').html(str);

            form.render();

            cb && cb(); //如果cb有传入数据，就执行后面cb();
          });

        // 省切换的时候：填充市
        form.on('select(province)', function(data) {
          let pname = $('#province').val();
          axios
            .get('/geo/city', {
              params: {
                pname
              }
            })
            .then(({
              data: res
            }) => {
              // console.log(res);
              let str = '<option selected value="">--市--</option>';
              res.forEach(item => {
                str += `<option value="${item}">${item}</option>`;
              });
              $('#city').html(str);

              form.render();
            })

          // 重置县
          $('#county').html(`<option selected value="">--县--</option>`);
        })


        // 市切换的时候，填充县
        form.on('select(city)', function(data) {

          let pname = $('#province').val();
          let cname = $('#city').val();
          axios
            .get('/geo/county', {
              params: {
                pname,
                cname
              }
            })
            .then(({
              data: res
            }) => {
              // console.log(res);
              let str = '<option selected value="">--县--</option>';
              res.forEach(item => {
                str += `<option value="${item}">${item}</option>`
              });
              $('#county').html(str)


              form.render();
            })
        })

      }
      // 新增的字符串
      let add_str = `<form action="" class="container add-form layui-form">
<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">姓名</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="name" lay-verify="required" placeholder="学员姓名" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">年龄</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="age" lay-verify="required" placeholder="学员年龄" autocomplete="off">
  </div>
</div>
<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">组号</label>
  <div class="col-sm-10">
    <select class="form-select form-select-sm" name="group" lay-verify="required">
      <option selected value="">请选择一个组号</option>
      <option value="1">1组</option>
      <option value="2">2组</option>
      <option value="3">3组</option>
      <option value="4">4组</option>
      <option value="5">5组</option>
      <option value="6">6组</option>
      <option value="7">7组</option>
      <option value="8">8组</option>
      <option value="9">9组</option>
      <option value="10">10组</option>
      <option value="11">11组</option>
      <option value="12">12组</option>
      <option value="13">13组</option>
      <option value="14">14组</option>
      <option value="15">15组</option>
    </select>
  </div>
</div>


<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">性别</label>
  <div class="col-sm-10 self-valign">
    <div class="col-sm-1 form-check form-check-inline">
      <input class="form-check-input" type="radio" name="sex" value="男" checked lay-verify="required">
      <label class="form-check-label">男</label>
    </div>
    <div class="col-sm-1 form-check form-check-inline">
      <input class="form-check-input" type="radio" name="sex" value="女" lay-verify="required">
      <label class="form-check-label">女</label>
    </div>
  </div>

</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">手机</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="phone" lay-verify="required|phone" placeholder="手机号" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">薪资</label>
  <div class="col-sm-5">
    <input type="text" class="form-control form-control-sm" name="salary" lay-verify="required" placeholder="期望薪资" autocomplete="off">
  </div>
  <div class="col-sm-5">
    <input type="text" class="form-control form-control-sm" name="truesalary" lay-verify="required" placeholder="实际薪资" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">籍贯</label>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="province" id="province" lay-verify="required" lay-filter="province">
      <option selected value="">--省--</option>
    </select>
  </div>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="city" id="city" lay-verify="required" lay-filter="city">
      <option selected value="">--市--</option>
    </select>
  </div>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="county" id="county" lay-verify="required" lay-filter="county">
      <option selected value="">--县--</option>
    </select>
  </div>
</div>

<div class="row mb-3">
  <div class="col-sm-2"></div>
  <div class="col-sm-10">
    <button type="submit" class="btn btn-primary btn-sm" lay-submit>确认添加</button>
    <button type="reset" class="btn btn-secondary btn-sm">重置</button>
  </div>
</div>
  </form>`;

      // 添加学生
      $("#add").click(function() {
        // 1.弹窗：
        let index = layer.open({
          type: 1, // 写HTML结构了 允许content写HTML结构了
          title: '添加',
          content: add_str,
          area: ['600px', '500px'],
        });

        // 2.基础工作：省市区联动
        home();


        // 3.提交
        $('.add-form').on('submit', function(e) {
          e.preventDefault();
          // 提交
          let data = $(this).serialize();
          axios
            .post('/student/add', data)
            .then(({
              data: res
            }) => {
              // console.log(res);
              if (res.code === 0) {
                layer.msg(res.message);
                getlist();
                layer.close(index);
              }
            })
        });



      });



      // *****************************************************************删除
      $('tbody').on('click', '.del', function() {
        if (!confirm('你确定要删除吗？')) return;
        let id = $(this).data('id');
        axios
          .delete('/student/delete', {
            params: {
              id
            }
          })
          .then(({
            data: res
          }) => {
            if (res.code === 0) {
              layer.msg(res.message)
            };
            getlist();
          })
      });


      // ****************************************************************修改
      let edit_str = `<form class="container eidt-form layui-form" lay-filter="box" >
<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">姓名</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="name" lay-verify="required" placeholder="学员姓名" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">年龄</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="age" lay-verify="required" placeholder="学员年龄" autocomplete="off">
  </div>
</div>
<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">组号</label>
  <div class="col-sm-10">
    <select class="form-select form-select-sm" name="group" lay-verify="required">
      <option selected value="">请选择一个组号</option>
      <option value="1">1组</option>
      <option value="2">2组</option>
      <option value="3">3组</option>
      <option value="4">4组</option>
      <option value="5">5组</option>
      <option value="6">6组</option>
      <option value="7">7组</option>
      <option value="8">8组</option>
      <option value="9">9组</option>
      <option value="10">10组</option>
      <option value="11">11组</option>
      <option value="12">12组</option>
      <option value="13">13组</option>
      <option value="14">14组</option>
      <option value="15">15组</option>
    </select>
  </div>
</div>


<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">性别</label>
  <div class="col-sm-10 self-valign">
    <div class="col-sm-1 form-check form-check-inline">
      <input class="form-check-input" type="radio" name="sex" value="男" checked lay-verify="required">
      <label class="form-check-label">男</label>
    </div>
    <div class="col-sm-1 form-check form-check-inline">
      <input class="form-check-input" type="radio" name="sex" value="女" lay-verify="required">
      <label class="form-check-label">女</label>
    </div>
  </div>

</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">手机</label>
  <div class="col-sm-10">
    <input type="text" class="form-control form-control-sm" name="phone" lay-verify="required|phone" placeholder="手机号" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">薪资</label>
  <div class="col-sm-5">
    <input type="text" class="form-control form-control-sm" name="salary" lay-verify="required" placeholder="期望薪资" autocomplete="off">
  </div>
  <div class="col-sm-5">
    <input type="text" class="form-control form-control-sm" name="truesalary" lay-verify="required" placeholder="实际薪资" autocomplete="off">
  </div>
</div>

<div class="row mb-3">
  <label class="col-sm-2 col-form-label-sm">籍贯</label>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="province" id="province" lay-verify="required" lay-filter="province">
      <option selected value="">--省--</option>
    </select>
  </div>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="city" id="city" lay-verify="required" lay-filter="city">
      <option selected value="">--市--</option>
    </select>
  </div>
  <div class="col-sm-3">
    <select class="form-select form-select-sm" name="county" id="county" lay-verify="required" lay-filter="county">
      <option selected value="">--县--</option>
    </select>
  </div>
</div>

<div class="row mb-3">
  <div class="col-sm-2"></div>
  <div class="col-sm-10">
    <input type="hidden" name="id">
    <button type="submit" class="btn btn-primary btn-sm" lay-submit>确认修改</button>
  </div>
</div>
  </form>`;


      $('tbody').on('click', '.update', function() {
        let id = $(this).data('id');
        axios
          .get('/student/one', {
            params: {
              id
            }
          })
          .then(({
            data: res
          }) => {
            if (res.code === 0) {
              console.log(res.data);

              // 1.准备弹窗：
              let index = layer.open({
                type: 1,
                title: '修改',
                content: edit_str,
                area: ['600px', '500px'],
              });



              // 2.初始化准备
              home(function() {


                // 3.数据回填
                form.val("box", res.data);
                $("#city").html(`<option value="${res.data.city}">${res.data.city}</option>`);
                $("#county").html(`<option value="${res.data.county}">${res.data.county}</option>`);
                form.render();
              });




              // 4.提交数据：
              $('.eidt-form').on('submit', function(e) {
                e.preventDefault();
                //提交逻辑
                let data = $(this).serialize();
                console.log(data);

                axios
                  .put('/student/update', data)
                  .then(({
                    data: res
                  }) => {
                    // console.log(res);
                    if (res.code === 0) {
                      layer.msg(res.message);
                      getlist();

                      layer.close(index);
                    }
                  })
              });












            }
          })
      });
    });
  </script>
</body>

</html>